// 封装的对话框组件

import React, { Component } from "react";
import "./style.css";
import { string, number, oneOfType, func } from "prop-types";
import withPortal from "./withPortal";

class Modal extends Component {
  static defaultProps = {
    width: 520,
    title: "Basic Modal",
    cancelText: "取消",
    okText: "确定",
  };

  static propTypes = {
    width: oneOfType([number, string]),
    title: string,
    cancelText: string,
    okText: string,
    onCancel: func,
    onOk: func,
  };

  render() {
    return (
      this.props.open && (
        <div className="wrap">
          <div className="center" style={{ width: this.props.width + "px" }}>
            <h4>{this.props.title}</h4>
            <div>{this.props.children}</div>
            <footer>
              <button onClick={this.props.onCancel}>
                {this.props.cancelText}
              </button>
              <button onClick={this.props.onOk}>{this.props.okText}</button>
            </footer>
          </div>
        </div>
      )
    );
  }
}

export default withPortal(Modal);
